import { Button } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from "mobx"
import { WeaTop, WeaRightMenu, WeaLocaleProvider, WeaProgress, WeaNewScroll, WeaTab, WeaInput } from 'ecCom'
import { ConditionNum } from '../list/listCondition'
import WorkReport from './workReport'
import '../../../style/taskSlide.css'
import CubeLayout from "../cubeLayout";
import GovernTag from '../governPoint/tag';
const getLabel = WeaLocaleProvider.getLabel;

@inject("taskSlideStore", "topStore")
@observer
export default class TaskSlide extends React.Component {

    constructor(props) {
        super(props);
    }
    componentDidMount = () => {
        //const {taskSlideStore} = this.props;
        //taskSlideStore.getSlideCondition();
        //taskSlideStore.doSearch();
    }
    render() {
        const { taskSlideStore, id, showTaskSlide, topStore } = this.props;
        const { status, tasklabels, formSlide, slideStatu, cubeLayoutParame, getCardStorefun } = taskSlideStore;
        const { loading } = status;
        const { progress } = slideStatu;
        const { topIcon = "icon-coms-government", iconBgcolor = "#f14a2d" } = tasklabels;
        let rightMenu = this.getRightMenu();
        const renderAgain = Math.random();
        return (
            <div className='g-task-slide'>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@6g1zhx`} style={{ color: "#ccc" }} datas={rightMenu} onClick={this.onRightMenuClick}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@muuj6f`} loading={loading} icon={<i className={topIcon} />} buttons={this.getQuickBtn()} iconBgcolor={iconBgcolor} title={getLabel('383349,22045', '任务详情')} >
                        <div style={{ marginLeft: "20px" }}>
                            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@zdkkpo`}
                                datas={[{
                                    color: '#000000',
                                    groupid: 'flowAll',
                                    showcount: true,
                                    title: getLabel(389235, "任务内容"),
                                    viewcondition: 0
                                }]}
                                keyParam="viewcondition"  //主键
                                countParam="groupid" //数量
                                selectedKey="0"
                            />
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@mswrpb`} toTop={true} height={300} loading={loading}>
                                {
                                    Object.keys(cubeLayoutParame).length > 0 ? (<div className="g-row-bottom-line g-detail-main">{CubeLayout({ cubeLayoutParame, getCardStorefun,"getEcmeFieldData":this.getEcmeFieldData ,renderAgain, autoHeight: true })}</div>) :
                                        (<div className="g-row-bottom-line g-detail-main">
                                            <ConditionNum ecId={`${this && this.props && this.props.ecId || ''}_ConditionNum@8txqo2`} listStore={taskSlideStore} formB={formSlide} listStore2={topStore}></ConditionNum>
                                        </div>)
                                }
                            </WeaNewScroll>
                        </div>
                        <div className="progress">
                            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@g10c9j`} type="circle" percent={progress} strokeColor="#32A8FF" width={60} />
                        </div>
                        <div style={{ marginLeft: "20px" }}>
                            {showTaskSlide && <WorkReport ecId={`${this && this.props && this.props.ecId || ''}_WorkReport@eelwn1`} id={id} loading={loading}></WorkReport>}
                        </div>
                    </WeaTop>
                </WeaRightMenu>
            </div>
        )
    }
    checkAttention = (value) => {
        this.setState({ attentionCheck: value })
    }
    changeGroup = (value) => {
        this.setState({ currentGroup: value.groupId })
    }

    /**
     * 快捷按钮及右键按钮方法
     */
    onRightMenuClick = (key) => {
        const { taskSlideStore } = this.props;
        const { slideStatu } = taskSlideStore;
        const { id } = slideStatu;
        this.props.doAction(key, { id });
    }

    /**
     * 解析右键按钮
     */
    getRightMenu = () => {
        const { taskSlideStore } = this.props;
        const { slideStatu } = taskSlideStore;
        const { rightMenu = [] } = slideStatu;
        const rs = toJS(rightMenu) || [];
        let rms = []
        rs.map((i) => {
            rms.push({
                key: i.key,
                icon: <i className={i.icon} />,
                content: i.label
            })
        });
        return rms;
    }

    /**
     * 解析快捷按钮
     */
    getQuickBtn = () => {
        const { taskSlideStore } = this.props;
        const { slideStatu } = taskSlideStore;
        const { rightMenu = [] } = slideStatu;
        const rs = toJS(rightMenu) || [];
        let rms = []
        rs.map((i) => {
            rms.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dya7po@${i.key}`} className="button-space" type="primary" onClick={() => this.onRightMenuClick(i.key)}>{i.label}</Button>)
        });
        return rms;
    }

    //重定义进度dom
    progressItem(field) {
        const { progress } = this.props.taskSlideStore.slideStatu;
        return <div><WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@dfshuh`} percent={progress} strokeColor="#28ce87" /></div>
    }

    //重定义状态dom
    statusItem(field) {
        const { taskSlideStore } = this.props;
        let isFinishTask = false;
        let isDiscard = false;
        if (taskSlideStore.modelStore.isFinishTask || taskSlideStore.modelStore.isDiscard) {
            isFinishTask = taskSlideStore.modelStore.isFinishTask;
            isDiscard = taskSlideStore.modelStore.isDiscard;
        }
        return <div><GovernTag ecId={`${this && this.props && this.props.ecId || ''}_GovernTag@7tb0c8`} record={field} isFinishTask={isFinishTask} isDiscard={isDiscard} /></div>
    }

    getInput(field) {
        return <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@nsw5z8`} viewAttr={1} value={field.value} />
    }

    //解析字段时回调  传入字段的id（field-111）等及相关信息
    getEcmeFieldData = (path, param) => {
        const { cubeLayoutParame } = this.props.taskSlideStore;
        const { specialFields } = cubeLayoutParame

        if (_.has(specialFields, path)) {
            if (specialFields[path].fieldname == 'progress') {
                return this.progressItem(param);
            }
            if (specialFields[path].fieldname == 'status') {
                return this.statusItem(param);
            }
            return this.getInput(param);
        }
        return null;
    }
}
